<template>
    <div class="InfiniteScroll" :style="{'height':height}">
        <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
            <div v-if="list.length>=6" class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
                <div ref="scrollItemBox">
                    <div class="scroll_item" v-for="(item, index) in list" :key="index">
                        <div class="flex">
                            <div>{{formatName(item.name)}}</div>
                            <div class="e-flex-1" style="text-align: center;padding:0 15px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.address }}</div>
                            <div>{{ item.mobile }}</div>
                        </div>
                    </div>
                </div>
                <div v-html="copyHtml"></div>
                <div v-html="copyHtml"></div>
            </div>
            <div v-if="list.length<6" class="scroll_list">
                <div ref="scrollItemBox">
                    <div class="scroll_item" v-for="(item, index) in list" :key="index">
                        <div class="flex">
                            <div>{{formatName(item.name)}}</div>
                            <div class="e-flex-1" style="text-align: center;padding:0 15px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.address }}</div>
                            <div>{{ item.mobile }}</div>
                        </div>
                    </div>
                </div>
                <div v-html="copyHtml"></div>
            </div>
        </div>
    </div>
</template>

<script>
let timer = null;
export default {
    name: "InfiniteScroll",
    props:{
        list: [],
        height: ''
    },
    data() {
        return {
            scrollTop: 0, //列表滚动高度
            speed: 15, //滚动的速度

            listData: [{
                'title': '最新订单第一行',
            }, {
                'title': '最新订单第二行',
            }, {
                'title': '最新订单第三行',
            }, {
                'title': '最新订单第四行',
            }, {
                'title': '最新订单第五行',
            }, {
                'title': '最新订单第六行',
            }, {
                'title': '最新订单第七行',
            }, {
                'title': '最新订单第八行',
            }, {
                'title': '最新订单第九行',
            },{
                'title': '最新订单第十行',
            },{
                'title': '最新订单第十一行',
            }], //表示有多少个列表项
            copyHtml: '', //复制多一份防止滚动到后面出现空白
        };
    },
    mounted() {
        console.log('InfiniteScroll-data',this.list)
        // 如果列表数据是异步获取的，记得初始化在获取数据后再调用
        this.initScroll()
    },
    unmounted(){
        clearInterval(timer)
    },
    methods: {
        formatName(name) {
            var newStr;
            if (name.length === 2) {
                newStr = name.substr(0, 1) + '*';
            } else if (name.length > 2) {
                var char = '';
                for (var i = 0, len = name.length - 2; i < len; i++) {
                    char += '*';
                }
                newStr = name.substr(0, 1) + char + name.substr(-1, 1);
            } else {
                newStr = name;
            }
            return newStr;
        },
        initScroll() {
            this.$nextTick(() => {
                this.copyHtml = this.$refs.scrollItemBox.innerHTML
                this.startScroll()
            })
        },
        // 鼠标移入停止滚动
        mEnter() {
            clearInterval(timer);
        },
        // 鼠标移出继续滚动
        mLeave() {
            this.startScroll()
        },
        // 开始滚动
        startScroll() {
            timer = setInterval(this.scroll, this.speed);
        },
        // 滚动处理方法
        scroll() {
            this.scrollTop++
            // 获取需要滚动的盒子的高度
            if(this.$refs.scrollItemBox == undefined){
                clearInterval(timer);
                return
            }
            let scrollItemBox = this.$refs.scrollItemBox.offsetHeight
            
            // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
            if (this.scrollTop >= scrollItemBox) {
                this.scrollTop = 0
            }
        }

    },
};
</script>

<style scoped>
.InfiniteScroll {
    box-sizing: border-box;
    height: 100%;
}

.scroll_parent_box {
    width: 100%;
    height: auto;
    /* border: 1px solid #ebeef5; */
    overflow: hidden;
    box-sizing: border-box;
    /* padding: 0 10px; */
}

.scroll_list {
    transition: all 0ms ease-in 0s
}

.scroll_item {
    height: 40px;
    line-height: 40px;
    /* text-align: center; */
    font-size: 14px;
}
</style>

